*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.nav{
    width: 80%;
    margin: 0 auto;
    background-color: red;
}
.nav>ul{
    display: flex;
    justify-content: space-between;
}
.nav>ul>li{
    width: 10%;
    text-align: center;
    position: relative;
}
.nav ul li{
    height: 43px;
    box-sizing: border-box;
}
.nav ul li a{
    text-decoration:none;
    color: aliceblue;
    /* 所有的a继承父级的宽度 */
    display: block;
    padding: 10px 0;
}
.nav ul li a:hover{
    background-color: aqua;
    border-bottom: 4px solid blueviolet;
}
.nav>ul>li>ul{
   /* 动画效果，当高度改变时，使其2s渐变 */
    transition: height 2s ease; 
    background-color: red;
    width: 100%;
    height: 0;
    overflow: hidden;
    position: absolute;
    top:40px;
}